@layer {
  @tailwind base;
}

@layer base {
  ol {
    @apply list-decimal;
  }
  ul {
    @apply list-disc;
  }
}

@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --radius: 0.5rem;
  }

  .dark {
    --radius: 0.5rem;
  }
}


/* I don't know why border's don't have this styling by default:
 * https://tailwindcss.com/docs/preflight#border-styles-are-reset-globally */
*,
::before,
::after {
  border-width: 0;
  border-style: solid;
  border-color: theme('borderColor.DEFAULT', currentColor);
}

a[data-footnote-ref="true"] {
  scroll-margin-top: calc(var(--ifm-navbar-height) + 0.5rem);
}

figure {
  margin-inline-start: 10px;
  margin-inline-end: 10px;
}

.docusaurus-mermaid-container {
  display: flex;
  justify-content: center;
}

.diff-minus {
  background: #fff8ef !important;
}

.diff-plus {
  background: #c1ddff !important;
}

[data-theme="dark"] .diff-minus {
  background: #470000 !important;
}

[data-theme="dark"] .diff-plus {
  background: #00234d !important;
}

:root {
  --ifm-font-size-base: 15px;
  --ifm-navbar-height: 64px;
  --ifm-font-size-base: 16px;
  --ifm-menu-link-padding-vertical: 0.5rem;
  --ifm-menu-color: var(--ifm-color-gray-600);
  --ifm-menu-color-background-active: var(
    --ifm-color-primary-contrast-background
  );
  --ifm-breadcrumb-border-radius: 0.5rem;
  --ifm-toc-border-color: var(--ifm-color-emphasis-100);
  --ifm-z-index-fixed: 50;
}

.markdown {
  color: var(--ifm-color-gray-700);

  --ifm-h1-vertical-rhythm-top: 5;
  --ifm-h2-vertical-rhythm-top: 4;
  --ifm-h3-vertical-rhythm-top: 3;
  --ifm-heading-vertical-rhythm-top: 1.25;
  --ifm-h1-vertical-rhythm-bottom: 1.25;
  --ifm-heading-vertical-rhythm-bottom: 1;
}

.markdown a {
  color: var(--ifm-color-primary);
  font-weight: 600;
}

.markdown p {
  margin-top: 1rem;
}

.markdown h1:first-child {
  --ifm-h1-font-size: 2rem !important;

  margin-bottom: calc(
    var(--ifm-h1-vertical-rhythm-bottom) * var(--ifm-leading)
  );
}

.markdown img {
  border-radius: var(--ifm-global-radius);
}

.markdown h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ifm-color-emphasis-1000);
}

:root {
  --ifm-color-primary: #023e8a;
  --ifm-color-primary-dark: #02387c;
  --ifm-color-primary-darker: #023575;
  --ifm-color-primary-darkest: #012b61;
  --ifm-color-primary-light: #024498;
  --ifm-color-primary-lighter: #02479f;
  --ifm-color-primary-lightest: #0351b3;
  --ifm-alert-border-radius: 0;
}

[data-theme="dark"] {
  --ifm-color-primary: #f1ec6d;
  --ifm-color-primary-dark: #eee84d;
  --ifm-color-primary-darker: #ece63d;
  --ifm-color-primary-darkest: #e0d815;
  --ifm-color-primary-light: #f4f08d;
  --ifm-color-primary-lighter: #f6f29d;
  --ifm-color-primary-lightest: #faf8cd;
}

swiper-container {
  margin-bottom: 20px;
}

swiper-slide {
  margin-top: auto;
  margin-bottom: auto;
  text-align: center;
}

swiper-slide img {
  max-height: 450px;
  width: auto;
}

:root {
  --swiper-navigation-size: 44px;
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 0;
  --swiper-pagination-color: var(--ifm-color-primary);
  --swiper-navigation-color: var(--ifm-color-primary);
  --swiper-pagination-bottom: -5px;
}

html[data-theme="dark"] {
  --swiper-pagination-bullet-inactive-color: #fff;
  --swiper-pagination-bullet-inactive-opacity: 0.5;
  --swiper-button-background: rgb(0 0 0 / 44%);
}

.ch-scrollycoding-sticker {
  flex-flow: column-reverse;
  gap: 0 !important;
  background: var(--sail-color-blue-800);
  border-radius: 4px;
}

.ch-scrollycoding {
  gap: 0;
}

.ch-scrollycoding-step-content {
  border-radius: 0;
  padding: 24px;
  border: 0;
  border-left: 4px solid transparent;
  box-shadow: inset 0 1px var(--ifm-color-gray-300);
  margin: 0 0 0 -0.5rem;
  transition: all 0.3s ease;
}

html[data-theme="dark"] .ch-scrollycoding-step-content {
  box-shadow: inset 0 1px #3d3d3d;
}

.ch-scrollycoding-step-content[data-selected] {
  border-color: var(--ifm-color-primary-dark);
  background-color: var(--ifm-color-gray-200);
}

html[data-theme="dark"] .ch-scrollycoding-step-content[data-selected] {
  background-color: #222222;
}

:root {
  --ch-0: dark;
  --ch-1: #8b949e;
  --ch-2: #79c0ff;
  --ch-3: #ffa657;
  --ch-4: #c9d1d9;
  --ch-5: #d2a8ff;
  --ch-6: #7ee787;
  --ch-7: #ff7b72;
  --ch-8: #a5d6ff;
  --ch-9: #ffa198;
  --ch-10: #f0f6fc;
  --ch-11: #490202;
  --ch-12: #04260f;
  --ch-13: #5a1e02;
  --ch-14: #161b22;
  --ch-15: #8b949e;
  --ch-16: #0d1117;
  --ch-17: #6e76811a;
  --ch-18: #ffffff0b;
  --ch-19: #3794ff;
  --ch-20: #264f78;
  --ch-21: #1f6feb;
  --ch-22: #010409;
  --ch-23: #30363d;
  --ch-24: #6e7681;
  --ch-25: #6e768166;
  --ch-26: #0d1117e6;
}

[data-theme="light"] {
  --ch-0: light;
  --ch-1: #6e7781;
  --ch-2: #0550ae;
  --ch-3: #953800;
  --ch-4: #24292f;
  --ch-5: #8250df;
  --ch-6: #116329;
  --ch-7: #cf222e;
  --ch-8: #0a3069;
  --ch-9: #82071e;
  --ch-10: #f6f8fa;
  --ch-11: #ffebe9;
  --ch-12: #dafbe1;
  --ch-13: #ffd8b5;
  --ch-14: #eaeef2;
  --ch-15: #57606a;
  --ch-16: #ffffff;
  --ch-17: #eaeef280;
  --ch-18: #fdff0033;
  --ch-19: #1a85ff;
  --ch-20: #add6ff;
  --ch-21: #0969da;
  --ch-22: #f6f8fa;
  --ch-23: #d0d7de;
  --ch-24: #8c959f;
  --ch-25: #afb8c133;
  --ch-26: #ffffffe6;
}

summary {
  cursor: pointer;
}

.highlighted-node circle {
  fill: yellow !important;
}

.highlighted-node .nodeLabel {
  color: black !important;
}

.theme-doc-sidebar-container {
  border-right: none !important;
  font-size: 0.875rem;
}

.menu__link {
  line-height: 1.55;
  border-radius: 0.5rem;
}

.navbar {
  border-bottom: 1px solid var(--ifm-toc-border-color);
  box-shadow: none !important;
}

.navbar-sidebar__brand {
  border-bottom: 1px solid var(--ifm-toc-border-color);
  box-shadow: none !important;
}

.menu__link--sublist-caret:after {
  background: var(--ifm-menu-link-sublist-icon) 50% / 1rem 1rem;
}

.menu__link:hover {
  color: var(--ifm-color-emphasis-800);
}

.menu__link:hover {
  color: var(--ifm-color-emphasis-800);
}

.menu__link--active:hover {
  color: var(--ifm-menu-color-active);
}

.menu__caret:before {
  background: var(--ifm-menu-link-sublist-icon) 50% / 1rem 1rem;
}

.navbar {
  padding-top: 0;
  padding-bottom: 0;
}

@media (min-width: 996px) {
  .navbar__item {
    display: flex;
    align-items: center;
    height: 100%;
  }
}

.navbar__link {
  color: var(--ifm-color-gray-600);
  font-size: 0.875rem;
  font-weight: 600;
}

.navbar__link--active {
  margin-top: 2px;
  color: var(--ifm-color-primary);
  border-bottom: 2px solid var(--ifm-color-primary);
}

.navbar__link:hover {
  color: var(--ifm-color-primary);
}

.menu__list-item:not(:first-child) {
  margin-top: 0;
}

.menu__list .menu__list {
  margin-top: 0;
}

.avatar__subtitle {
  color: var(--ifm-color-gray-700);
}

.breadcrumbs {
  margin-left: calc(
    var(--ifm-breadcrumb-padding-horizontal) *
      var(--ifm-breadcrumb-size-multiplier) * -1
  );
}

.breadcrumbs__link {
  color: var(--ifm-color-primary);
  font-weight: var(--ifm-font-weight-bold);
  font-size: 0.875rem;
}

.breadcrumbs__item--active .breadcrumbs__link {
  background: none;
}

.breadcrumbs__link:any-link:hover {
  background: var(--ifm-color-primary-contrast-background);
}

.table-of-contents,
.table-of-contents ul {
  padding-left: 0;
}

.table-of-contents__link {
  padding: 0.1rem 0.4rem;
  color: var(--ifm-color-emphasis-600);
}

.table-of-contents__link--active {
  color: var(--ifm-color-primary);
  background: var(--ifm-color-primary-contrast-background);
}

.ch-codegroup,
.ch-codeblock {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  width: 100%;
}
